<template>
  <div class="homePage">
    <section class="header clearfix" @click="switchFun()">
      <span>待办事项</span>
      <span class="num">{{ todoNumber }}</span>
      <span class="org">
        <i
          class="iconfont"
          :class="[active ? 'iconxiangxia2' : 'iconxiangshang']"
        ></i>
        {{ text }}
      </span>
    </section>
    <ul class="schedule" :class="[active ? '' : 'open']">
      <li v-if="notice1" @click="jumpPage(0, 'completeInfo')">
        有未通过审核消息
      </li>
      <li v-if="notice2" @click="jumpPage(0, 'completeInfo')">补全员工信息</li>
      <li v-if="notice3" @click="jumpPage(1, 'auditList')">您有信息需要审核</li>
      <li v-if="notice4" @click="jumpPage(5, 'billManagement')">
        您有生成的账单，以免服务中断
      </li>
    </ul>
  </div>
</template>

<script>
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "homePage",
  data() {
    return {
      text: "收起",
      todoNumber: "",
      active: false,
      notice1: false,
      notice2: false,
      notice3: false,
      notice4: false,
    };
  },
  methods: {
    switchFun() {
      this.active = !this.active;
      if (this.text == "展开") {
        this.text = "收起";
      } else {
        this.text = "展开";
      }
    },
    jumpPage(i, name) {
      this.currentTabComponent = name;
      this.$store.commit("changeIndex", i);
      this.$router.push(name);
    },
    getData() {
      var reqData = {
        userId: JSON.parse(sessionStorage.getItem("login")).userId,
      };
      let reqReport = reqRep({ traCode: "_INDEX", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          console.log(resReport.data);
          //           if (res.data.data.length > 0) {
          //   this.todoNumber = res.data.data.length;
          //   for (let i = 0; i < list.length; i++) {
          //     if (list[i].type == 1) {
          //       this.notice1 = true;
          //     } else if (list[i].type == 2) {
          //       this.notice2 = true;
          //     } else if (list[i].type == 3) {
          //       this.notice3 = true;
          //     } else if (list[i].type == 4) {
          //       this.notice4 = true;
          //     }
          //   }
          // }
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped>
.homePage {
  position: relative;
}
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.header .org {
  float: right;
}
.org:hover {
  color: #13cb6e;
}
.header i {
  font-size: 20px;
  margin-right: 5px;
}
i {
  font-size: 16px;
  color: #999;
}
.num {
  display: inline-block;
  margin-left: 10px;
  padding: 0 8px;
  text-align: center;
  color: #fff;
  background: #f56c6c;
  border-radius: 15px;
  font-size: 12px;
}
.schedule {
  position: absolute;
  top: 50px;
  width: 100%;
  opacity: 0;
  display: none;
}
.open {
  display: inline-block;
  opacity: 1;
}
.schedule li {
  font-size: 14px;
  color: #666;
  padding: 20px 30px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.schedule li:hover {
  color: #13cb6e;
}
</style>
